<template>
  <view style="width: 100%;">
    <view style="width: 100%;">
      <swiperVideoImgs :imgs_arr="course_data.imgs_arr" :video="course_data.video"></swiperVideoImgs>
    </view>
    <view class="head flex align-center justify-between">
      <view class="head-left">
        <view class="head-left-title">{{ course_data.name }}</view>
        <view class="head-left-middle flex align-center">
          <view class="middle-left flex align-center">
            <image style="width: 25upx;height: 23upx;margin-left: 5upx;"
                   src="/static/icon/tutorials/gongkaobaike@2x.png" mode=""></image>
            <text style="margin-left: 5upx;">{{course_data.video_tutorial_num}}</text>
          </view>
          <view class="middle-left flex align-center">
            <image style="width: 25upx;height: 23upx;margin-left: 5upx;" src="/static/icon/tutorials/kecheng@2x.png"
                   mode=""></image>
            <text style="margin-left: 5upx;">{{ course_data.sale_num }}人在学</text>
          </view>
        </view>
        <view class="flex align-center">
          <view style="font-size: 30upx;color: rgba(229,39,24,1); margin-right: 30upx;">￥{{ course_data.sale_price }}</view>
          <text style="font-size: 22upx;color: rgba(153,153,153,1);">有效时间: 自购买之日起永久有效</text>
        </view>
      </view>
      <view class="flex flex-direction align-end" style="width: 30%;">
        <view class="flex align-center">
          <image style="width: 44upx;height: 44upx;border-radius: 50%;"
                 :src="course_data.admin && course_data.admin.avatar" mode="aspectFill"></image>
          <text style="font-size: 22upx;color: rgba(153,153,153,1);margin-left: 10upx;">
            {{ course_data.admin && course_data.admin.nick_name }}
          </text>
        </view>
        <view class="head-right-buttom" v-if="!course_data.is_self">
          <view v-if="!course_data.is_attention"
                @click="handleFollow(course_data.user, course_data.admin_id)"
                class="flex justify-center align-center cu-load"
                style="width: 140upx; height: 60upx; background-color: #E52718; border-radius: 40upx; color: white; font-size: 24upx;">
            关注
          </view>
          <view v-else @click="handleFollow(course_data.user, course_data.admin_id)"
                class="flex justify-center align-center cu-load"
                style="width: 140upx; height: 60upx; border-radius: 40upx; font-size: 24upx; border: 2upx solid #E52718; color: #E52718;">
            已关注
          </view>
        </view>
        <!--				<view @click="handleFollow" class="head-right-buttom flex align-center justify-center">关注</view>-->
      </view>
    </view>
    <view class="record-0" style="height: 20upx;background-color: rgba(248,248,248,1);"></view>
    <view id="tabList" class="tutorials-0 flex align-center justify-between" style="padding: 0 20upx;"
          :class="is_fixed ? 'tab-fixed' : ''">
      <view class="tab flex align-center justify-center" @click="handleChangeTab(index)"
            v-for="(item,index) in tab_list" :key="index"
            :style="tab_index == index?'color: rgba(229,39,24,1);font-size: 30upx;border-bottom: 1px solid rgba(229,39,24,1);':''">
        <view v-if="index == 2" class="flex align-center justify-center apprentice">
          <image src="/static/icon/tutorials/xuexi@2x.png" alt=""
                 style="width: 40upx; height: 32upx; margin-right: 8upx;"></image>
          <view style="font-size: 28upx; color: white;">我要拜师</view>
        </view>
        <view v-else>{{ item }}</view>
      </view>
    </view>
    <view v-if="is_fixed" style="width: 100%; height: 100upx;"></view>
    <view class="synopsis" v-html="course_data.intro"></view>
    <!--		<view style="padding: 0 0 29upx 21upx;">-->
    <!--			<image class="synopsis-img" src="/static/image/jiaocheng@2x.png" mode=""></image>-->
    <!--		</view>-->
    <view class="record-1" style="height: 10upx;background-color: rgba(248,248,248,1);"></view>
    <view class="chapter-title">教程章节</view>
    <view class="tutorials-1 flex-direction justify-center" style="padding: 0 20upx;">
<!--      <view v-if="item.type === 'single'" v-for="(item,index) in chapter_list" :key="index" @click.stop="handleToChapter(item.id, item.name)"-->
<!--            class="second_level flex align-center justify-between">-->
<!--        <view>-->
<!--          <text style="font-weight: 400; font-size: 28upx; color: #666666;">{{item.name}}</text>-->
<!--          <text class="free" v-if="item.is_free">-->
<!--            免费-->
<!--          </text>-->
<!--        </view>-->
<!--        <view class="">时长 {{item.video_time}}</view>-->
<!--      </view>-->

      <view @click="handleChangeFirstLevel(index)" class="chapter" v-for="(item,index) in chapter_list" :key="index">
        <view class="flex align-center justify-between" style="font-weight: 400; font-size: 28upx; padding: 20upx 0;">
          <view style="width: 90%;">{{ item.name }}</view>
          <image :style="item.is_show?'width:26upx;height: 18upx;':'width:22upx;height: 32upx;'"
                 :src="item.is_show?'/static/icon/tutorials/fanhui-2@2x.png':'/static/icon/icon_more@2x.png'"
                 mode=""></image>
        </view>
        <view v-if="item.is_show" @click.stop="handleToChapter(second_item.id, second_item.name)"
              class="second_level flex align-center justify-between"
              v-for="(second_item,second_index) in item.sub_video_tutorials" :key="second_index">
         <view class="flex flex-direction" style="width: 100%">
           <view class="margin-bottom">{{ second_item.name }}</view>
           <view class="flex align-center justify-between" style="padding: 0 10upx;">
             <view class="free flex align-center justify-center" v-if="second_item.is_free">免费</view>
             <view style="font-weight: 400; font-size: 28upx;">时长 {{ second_item.video_time }}</view>
           </view>
         </view>
        </view>
      </view>
    </view>
	
    <view class="record-2" style="height: 10upx;background-color: rgba(248,248,248,1);"></view>
    <view class="tutorials-2 teacher">
      <view style="width: 100%; height: 60upx; margin-bottom: 10upx;">
        <view class="apprentice-title">我要拜师</view>
<!--        <view class="flex align-center justify-center apprentice">-->
<!--          <image src="/static/icon/tutorials/xuexi@2x.png" alt=""-->
<!--                 style="width: 40upx; height: 32upx; margin-right: 8upx;"></image>-->
<!--          <view style="font-size: 28upx; color: #FFFFFF;"></view>-->
<!--        </view>-->
      </view>
      <view class="flex flex-direction align-center justify-center" @click="handleToHomePage(course_data.user && course_data.user.id)">
        <image style="width: 80upx;height: 80upx;border-radius: 50%;" :src="course_data.user && course_data.user.avatar"
               mode="aspectFill"></image>
        <text style="font-size: 26upx;margin-top: 10upx;">{{ course_data.user && course_data.user.name }}</text>
      </view>
      <view class="flex justify-center align-center" style="height: 82upx; font-size: 28upx; font-weight: 600; color: #999999;">师父介绍
      </view>
      <view style="font-size: 28upx;color: rgba(102,102,102,1); text-align: left;"
            v-html="course_data.information_html"></view>
      <view class="flex justify-center align-center" style="height: 82upx; font-size: 28upx; font-weight: 600; color: #999999;">服务内容
      </view>
      <view style="font-size: 28upx;color: rgba(102,102,102,1); text-align: left;"
            v-html="course_data.service_html"></view>
      <view class="flex justify-center align-center" style="height: 82upx; font-size: 28upx; font-weight: 600; color: #999999;">联系信息
      </view>
      <view style="font-size: 28upx;color: rgba(102,102,102,1); text-align: center;">
        {{ course_data.user && course_data.user.phonenum }}
      </view>
    </view>
    <view class="record-3" style="height: 10upx;background-color: rgba(248,248,248,1);"></view>
    <view class="tutorials-3" style="padding: 0 20upx;">
      <view class="material">教程资料</view>
      <view class="flex-direction">
        <view class="flex align-center"
              style="width: 100%; height: 84upx; background-color: #F8F8F8; border-radius: 10upx; padding: 0 20upx; margin-bottom: 10upx;"
              v-for="(item, index) in course_data.is_datas" :key="index">
          <view class="flex align-center" style="width: 50%;">
            <image src="/static/icon/detail/wenjian-2@2x.png"
                   style="width: 40upx; height: 36upx; margin-right: 12upx;"></image>
            <view class="text-hidden  material-name">
              {{ item.name }}
            </view>
            <view v-if="item.is_free" class="material-free flex align-center justify-center">免费</view>
          </view>
          <view class="flex justify-end" style="width: 50%;">
            <view style="font-size: 22upx; color: #999999;">{{ item.data_size }}MB</view>
            <image src="/static/icon/detail/download@2x.png" style="width: 30upx; height: 30upx; margin-left: 34%;"
                   @click="handleDown(item.is_free, course_data.is_buy, item.data_url)"></image>
          </view>
        </view>
        <view style="width: 100%; font-size: 28upx; color: #666666; margin-bottom: 20upx;"
              v-html="course_data.data_html"></view>
      </view>
    </view>
    <view style="height: 10upx;background-color: rgba(248,248,248,1);"></view>
    <view class="record-4">
      <view class="evaluate tutorials-4">
        <view style="font-size: 28upx;font-weight: 700;color: rgba(51,51,51,1);">互动评论({{ evaluate_list.length }})
        </view>
      </view>
      <view class="flex" v-for="(item, index) in evaluate_list" :key="index">
        <view class="flex" style="width: 100%; padding: 20upx; border-bottom: 2upx solid #F8F8F8;">
          <view style="width: 15%;">
            <image :src="item.user && item.user.avatar" mode="aspectFill"
                   style="width: 68upx; height: 68upx; border-radius: 60%; margin-right: 16upx;"></image>
          </view>
          <view class="flex flex-direction" style=" width: 88%;">
            <view class="flex justify-between">
              <view class="flex flex-direction">
                <view style="font-size: 22upx; color: #333333;">{{ item.user && item.user.nick_name }}</view>
                <view style="font-size: 22upx; color: #999999;">{{ item.created_at }}</view>
              </view>
              <view class="flex justify-between"  v-if="!course_data.deleted_at">
                <image :src="item.is_zan ? select_like_img : like_img" style="width: 28upx; height: 28upx;"
                       @click.stop="handleLike(item.id)"></image>
              </view>
            </view>
            <view class="flex" style="margin-top: 26upx;">
              <view style="font-size: 26upx;color: rgba(153,153,153,1);">评分:</view>
              <view class="" v-for="(score_item, score_index) in item.score" :key="score_index">
                <image style="width: 35upx;height: 35upx; margin-left: 11upx;"
                       src="/static/icon/detail/pingfen@2x.png"></image>
              </view>
            </view>
            <view class="flex align-center" style="width: 100%; padding: 2% 0; font-size: 26upx; color: #333333;">
              {{ item.content_html }}
            </view>
            <view class="flex" style="margin-bottom: 10upx; flex-wrap: wrap;">
              <view v-for="(com_imgs, com_index) in item.imgs_arr" :key="com_index" class="flex" style="padding: 10upx;" @click="handlePreviewImgs(com_imgs, item.imgs_arr)">
                <image :src="com_imgs" mode="aspectFill"
                       style="width: 170upx; height: 162upx; border-radius: 10upx;"></image>
              </view>
            </view>
            <view v-for="(review_item, review_index) in item.reviews" :key="review_index">
              <view class="flex" style="width: 100%; font-size: 26upx; color: #333333; margin-bottom: 10upx;">
                <view style="font-weight: bold; width: 15%;">追评：</view>
                <view style="font-size: 26upx; color: #333333; width: 85%;">{{ review_item.content_html }}</view>
              </view>
              <view class="flex" style="margin-bottom: 10upx; flex-wrap: wrap;">
                <view v-for="(review_img, review_img_index) in review_item.imgs_arr" style="padding: 10upx;">
                  <image :src="review_img" mode="aspectFill"
                         style="width: 170upx; height: 162upx; border-radius: 10upx;"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="flex align-center justify-center"
            v-if="evaluate_list.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
    <view class="bottom-tab flex align-center justify-between" v-if="!course_data.deleted_at">
      <view class="flex flex-direction align-center" @click="handleCollect(course_id)">
        <image :src="course_data.is_collection ? select_collect_img : collect_img"
               style="width: 40upx; height: 40upx;"></image>
        <view style="font-size: 22upx; color: #666666;">收藏</view>
      </view>
      <view v-if="course_data.is_buy" class="study flex align-center justify-center" style="background-color: #D8D8D8;">已购买
      </view>
      <view v-else @click="pay_flag = true;" class="study flex align-center justify-center">拜师学习
      </view>
    </view>
    <!--分享框-->
    <shareDialog :share_flag="share_flag" :herf="'tutorialDetail'"
                 :intro="'我有一篇非常好的教程分享给你'"
                 :article_title="course_data.name" :article_id="course_id" :article_img="course_data.img"
                 @handleCloseShareDialog="handleCloseShareDialog"></shareDialog>
    <!-- 弹出提示 -->
    <view class="cu-modal" :class="is_tips?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 478upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">提示</view>
        </view>
        <view class="flex justify-center"
              style="width: 100%; padding: 26upx; font-size: 28upx; word-break:break-all; color: #333333;">
          付费后即可下载
        </view>
        <view class="flex justify-center cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx; font-size: 26upx; color: #E52718;" @click="is_tips = false">
          我知道了
        </view>
      </view>
    </view>
    <!--下载链接-->
    <view class="cu-modal" :class="upload_link_flag?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 554upx;">
        <view class="cu-bar justify-end">
          <view class="content" style="font-weight: bold; color: #333333;">下载链接</view>
        </view>
        <view class="flex justify-center" style="width: 100%; padding: 26upx; word-break:break-all; color: #0052C6;">
          {{ upload_link }}
        </view>
        <view class="cu-bar" style="border-top: 2upx solid #F8F8F8; padding: 0 26upx;">
          <view @click="upload_link_flag = false" style="width: 50%; text-align: center; font-size: 26upx;">
            取消
          </view>
          <view style="width: 2upx; height: 54upx; background-color: #F8F8F8;"></view>
          <view @click="handleCopyLink()" style="width: 50%; text-align: center; color: #E52718; font-size: 26upx;">
            复制链接
          </view>
        </view>
      </view>
    </view>
    <!--支付框-->
    <view class="cu-modal bottom-modal" :class="pay_flag?'show':''" @click="pay_flag = false"
          @touchmove.stop.prevent="">
      <view class="cu-dialog" style="background-color: white; border-radius: 10upx 10upx 0 0;" @click.stop="">
        <view class="cu-bar justify-end" style="margin-bottom: 8%;">
          <view class="content" style="font-weight: bold; color: #333333; font-size: 26upx;">选择支付方式</view>
        </view>
        <view class="flex" style="padding: 0 40upx;">
          <radio-group style="width: 100%;" @change="handleChangeRadioChange">
            <view v-for="(item, index) in pay_type_list" style="margin-bottom: 8%;">
              <view class="flex justify-between align-center" style="width: 100%; margin-bottom: 32upx;">
                <view class="flex">
                  <image :src="item.img" style="width: 44upx; height: 44upx; margin-right: 10upx;"></image>
                  <view style="font-size: 26upx; color: #333333;">{{ item.name }}</view>
                </view>
                <radio class='radio' :value="index" :checked="pay_type === index"/>
              </view>
            </view>
          </radio-group>
        </view>
        <view class="flex justify-center align-center"
              @click="handleToPay(course_data.id, course_data.sale_price)"
              style="height: 98upx; background-color: #E52718; font-size: 28upx; color: white;">
          立即支付 <span style="font-size: 20upx;">（合计：¥{{course_data.sale_price}}）</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {course_getById} from "api/tutorials/tutorials"
import {attention_giveAttention} from "api/attention/attention";
import {evaluate_getListByCon} from "api/comment/comment"
import {collection_changeCollection} from "api/collect/collect"
import {zan_changeZan} from "api/like/like";
import shareDialog from "components/share-dialog/share-dialog";
import swiperVideoImgs from "components/swiper-video-imgs/swiper-video-imgs"
import {orders_payOrder, pay_aliPayOrders} from "api/pay/pay";
import {debounce} from "utils/wxUtil";

export default {
  components: {
    shareDialog,
    swiperVideoImgs
  },
  data() {
    return {
      course_id: '',//教程id
      course_data: {}, //教程数据
      tab_list: ['教程简介', '教程章节', '师父信息', '教程资料', '教程评价',], //分类栏
      select_collect_img: '/static/icon/detail/shoucang-2@2x.png', //选中收藏图片
      collect_img: '/static/icon/detail/shoucang-1@2x.png', //收藏图片
      select_like_img: '/static/icon/detail/dianzan-1@2x.png', //选中点赞图片
      like_img: '/static/icon/detail/dianzan@2x.png', //点赞图片
      tab_index: 0, //tab栏点击索引值
      chapter_list: [], //章节列表
      first_level: -1, //一级标题
      evaluate_list: [], //评论列表
      is_tips: false, //提示弹框
      is_load: true, // 加载
      is_bottom_load: true, //触底加载
      scroll_top: 0, //已滚动高度
      tab_top_list: [], //tab分类高度
      tab_height: 0, //tab栏距离顶部的高度
      is_fixed: false, //是否定位
      is_scroll: false, //屏幕是否滚动
      custom_bar_height: 0, //导航栏高度
      bottom_flag: true, //触底标识
      is_show_video: false, //是否显示视频
      page: 1, //分页
      share_flag: false, //分享
      upload_link_flag: false, //下载链接框
      upload_link: '', //下载链接
      pay_type_list: [
        {
          name: '微信支付',
          img: '/static/icon/detail/weixin@2x.png'
        },
        {
          name: '支付宝支付',
          img: '/static/icon/detail/zhifubao@2x.png'
        }
      ], //支付方式列表
      pay_flag: false,// 支付框
      pay_type: 0, //支付类型
      tutorials_top_list: [],
    }
  },
  mounted() {
    this.$nextTick( ()=> {
      for (let i = 0; i < 5; i++) {
        const query = uni.createSelectorQuery().in(this)
        query.select('.record-' + i).boundingClientRect(data => {
          this.tab_top_list.push(data.top)
        }).exec()
      }
    })
    const query = uni.createSelectorQuery().in(this)
    query.select('#tabList').boundingClientRect(data => {
      this.tab_height = data.top;
    }).exec()
  },
  beforeUpdate(){
    this.$nextTick( ()=> {
      for (let i = 0; i < 5; i++) {
        const query = uni.createSelectorQuery().in(this)
        query.select('.tutorials-' + i).boundingClientRect(data => {
          let height = data.top + data.height;
          this.tutorials_top_list.push(height)
        }).exec()
      }
    })
  },
  onShow() {
    let page = getCurrentPages();//获取应用页面栈
    let currentPage = page[page.length - 1];//获取当前页面信息
    this.custom_bar_height = uni.getStorageSync('system_info').statusBarHeight;
    this.course_id = currentPage.options.course_id;
    this.pageInit(currentPage.options.course_id, 1);
  },
  methods: {
    //初始化
    pageInit(course_id, type) {
      course_getById({course_id}).then(res => {
        if (res.data && res.data.intro) {
          res.data.intro = res.data.intro.replace(new RegExp(' style="" ', "g"), '');
          res.data.intro = res.data.intro.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.data_html) {
          res.data.data_html = res.data.data_html.replace(new RegExp(' style="" ', "g"), '');
          res.data.data_html = res.data.data_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.information_html) {
          res.data.information_html = res.data.information_html.replace(new RegExp(' style="" ', "g"), '');
          res.data.information_html = res.data.information_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.service_html) {
          res.data.service_html = res.data.service_html.replace(new RegExp(' style="" ', "g"), '');
          res.data.service_html = res.data.service_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        this.course_data = res.data;
        this.chapter_list = res.data.video_tutorials;
        this.chapter_list.forEach(item => {
          this.$set(item, 'is_show', false)
        })
        if (res.data.deleted_at) {
          const webView = this.$mp.page.$getAppWebview();
          webView.setTitleNViewButtonStyle(0, {
            "type": "text",
            text: ""
          })
        }
        this.getEvaluateData(this.course_data.id,1, type)
      }).catch(err => {
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
        setTimeout(()=>{
          uni.navigateBack({
            delta: 1
          });
        },500)
      })
    },
    //播放轮播视频
    handlePlayVideo() {
      this.videoContext = uni.createVideoContext('myVideo', this);
      this.videoContext.requestFullScreen();
      this.videoContext.play()
      this.is_show_video = true;
    },
    //视频全屏
    fullscreenchange(e) {
      if (!e.detail.fullScreen) {
        this.videoContext.pause()
        this.is_show_video = false
      }
    },
    //预览图片
    handlePreviewImgs(img,imgs_arr){
      uni.previewImage({
        urls: imgs_arr,
        current: img
      });
    },
    //获取商品评价
    getEvaluateData(f_id, page = 1, type) {
      evaluate_getListByCon({f_table: 'course', f_id, page}).then(res => {
        if(type){
          this.evaluate_list = [];
        }
        let temp_data= res.data.data;
        if (!temp_data.length) {
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            this.evaluate_list.push(item);
          })
        }
      })
    },
    //去个人主页
    handleToHomePage(account_user_id){
      this.$uniNavigateTo({
        url: '/pages/my/homePage/homePage',
        query: {
          account_user_id
        }
      })
    },
    //关注
    handleFollow: debounce(function (user, admin_id){
      this.is_load = false;
      attention_giveAttention({f_table: 'account_user', f_id: admin_id}).then(res => {
        this.course_data.is_attention = this.course_data.is_attention ? 0 : 1
        this.is_load = true;
      }).catch(err => {
        console.log(err)
      })
    }),
    /**
     * @name tab选择
     * @param {Object} index 索引值
     */
    handleChangeTab(index) {
      this.is_scroll = false
      this.tab_index = index
      const query = uni.createSelectorQuery().in(this)
      query.select('.record-' + index).boundingClientRect(data => {
        uni.pageScrollTo({
          duration: 200,
          scrollTop: this.scroll_top + data.top - this.custom_bar_height
        })
      }).exec()
    },
    /**
     * @name 一级目录选择
     * @param {Object} index 索引值
     */
    handleChangeFirstLevel(index) {
      this.chapter_list[index].is_show = !this.chapter_list[index].is_show
    },
    //选择支付方式
    handleChangeRadioChange(e) {
      this.pay_type = e.target.value;
    },
    //跳转章节详情
    handleToChapter(video_tutorial_id, video_name) {
      this.$uniNavigateTo({
        url: '/pages/tutorials/catalog/catalog',
        query: {
          video_tutorial_id,
          video_name
        }
      })
    },
    //下载资料
    handleDown(is_free, is_buy, data_url) {
      if(!is_free && !is_buy){
        this.is_tips = !this.is_tips
      }else {
        this.upload_link = data_url;
        this.upload_link_flag = true;
      }
    },
    //复制下载链接
    handleCopyLink() {
      uni.setClipboardData({
        data: this.upload_link,
        success: ()=> {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
          console.log('success');
        }
      })
      this.upload_link_flag = false;
    },
    /**
     * @name 点赞
     * @param {Object} f_id 评论内容id
     */
    handleLike: debounce(function (f_id){
      zan_changeZan({f_table: 'evaluate', f_id}).then(res => {
        console.log(res)
        let find = this.evaluate_list.find(x => x.id === f_id);
        find.is_zan = find.is_zan ? 0 : 1;
      }).catch(err => {
        console.log(err)
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
      })
    }),
    //收藏
    handleCollect: debounce(function (f_id){
      collection_changeCollection({f_table: 'course', f_id}).then(res => {
        this.course_data.is_collection ? this.course_data.is_collection = 0 : this.course_data.is_collection = 1;
      })
    }),
    //去支付
    handleToPay: debounce(function (course_id, fee){
      let data = {
        f_table: 'course',
        f_id: course_id,
        fee: fee
      }
      let user_id = uni.getStorageSync('user_info').id
      switch (this.pay_type) {
        case 0:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=course&f_id=${course_id}&fee=${fee}&user_id=${user_id}`);
          // orders_payOrder(data).then(res=>{
          //   uni.requestPayment({
          //     provider: 'wxpay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       this.pageInit(this.course_id)
          //     },
          //     fail: (err)=> {
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err=>{
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 1:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=course&f_id=${course_id}&fee=${fee}&user_id=${user_id}&type=1`);
          // pay_aliPayOrders(data).then(res=>{
          //   uni.requestPayment({
          //     provider: 'alipay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       this.pageInit(this.course_id)
          //     },
          //     fail: (err)=> {
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   })
          // }).catch(err=>{
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
      }
    }),
    //关闭分享模态框
    handleCloseShareDialog(e) {
      this.share_flag = false;
    },
  },
  //导航栏右侧分享按钮
  onNavigationBarButtonTap(e) {
    if(!this.course_data.deleted_at){
      this.share_flag = true;
    }
  },
  //导航栏左侧按钮
  onBackPress() {
    if (this.pay_flag) {
      this.pay_flag = false;
      return true
    }
  },
  //监听滚动
  onPageScroll(e) {
    let timer
    // 只要滚动就清除状态
    clearTimeout(timer)
    // 告知标识 -> 开始滚动
    // this.is_scroll = false
    // 检测是否停留了 N 秒
    // 如果停留则表示滚动结束
    // N: 500(定时器时间 毫秒) -> 0.5秒算停止滚动
    // 滚动后多长时间算停止滚动
    timer = setTimeout(() => {
      // 告知标识 -> 结束滚动
      this.is_scroll = true;
    }, 500);

    //监听tab栏是否滚动到顶部 若到达顶部则固定定位
    this.scroll_top = e.scrollTop
    if (e.scrollTop >= this.tab_height) {
      this.is_fixed = true;
    } else {
      this.is_fixed = false;
    }

    //当滚动停止时才会切换tab栏
    if (this.is_scroll) {
      if (e.scrollTop <= this.tutorials_top_list[0]) {
        this.tab_index = 0
      } else if (e.scrollTop <= this.tutorials_top_list[1]) {
        this.tab_index = 1
      } else if (e.scrollTop <= this.tutorials_top_list[2]) {
        this.tab_index = 2
      } else if (e.scrollTop <= this.tutorials_top_list[3]) {
        this.tab_index = 3
      } else {
        this.tab_index = 4
      }
    }
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.getEvaluateData(this.course_id, this.page);
    }
    console.log('上拉加载')
  },
}
</script>

<style scoped lang="less">
.free{
  width: 80upx;
  height: 36upx;
  //margin-left: 10upx;
  font-size: 20upx;
  color: rgba(229,39,24,1);
  border: 1px solid rgba(229,39,24,1);
  border-radius: 20upx;
}
/deep/ .cu-load.loading::after {
  content: '';
}

/deep/ .cu-load.over::after {
  content: '';
}

/deep/ .cu-load.over::before {
  content: '';
}

/deep/ .uni-swiper-dots {
  bottom: 24upx !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}
/deep/ .uni-radio-input-checked {
  border-color: #E52718 !important;
}

/deep/ uni-radio .uni-radio-input {
  width: 34upx;
  height: 34upx;
  background-color: #ffffff !important;
}

/deep/ uni-radio .uni-radio-input::after {
  background-color: #E52718 !important;
  border: 6upx solid #E52718 !important;
  border-color: #E52718 !important;
  left: -1 !important;
}
.material-name {
  max-width: 240upx;
  font-size: 28upx;
  color: #333333;
  font-weight: bold;
  margin-right: 3%;
}
.material-free{
  width: 80upx;
  height: 36upx;
  background-color: #E2E2E2;
  border-radius: 20upx;
  font-size: 24upx;
  color: white;
}
.apprentice {
  width: 200upx;
  height: 60upx;
  background-color: #E52718;
  border-radius: 40upx;
}
.apprentice-title{
  font-size: 28upx;
  font-weight: 700;
}
.tab-fixed {
  position: fixed;
  top: 0;
  background-color: white;
  width: 100%;
  z-index: 9;
}

.head {
  //height: 252rpx;
  padding: 0 20upx 20upx 20upx;
}

.head-left {
  width: 70%;
  height: 100%;
}

.head-left-title {
  padding-top: 16upx;
  font-size: 30upx;
  font-weight: 700;
}

.head-left-middle {
  margin: 20upx 0 26upx 0;
}

.middle-left {
  font-size: 24upx;
  color: rgba(153, 153, 153, 1);
  margin-right: 44upx;
}

.head-right-buttom {
  width: 140upx;
  height: 60upx;
  font-size: 24upx;
  margin-top: 24upx;
  color: #FFFFFF;
  border-radius: 40upx;
}

.tab {
  height: 86upx;
  font-size: 28upx;
}

.synopsis {
  font-size: 28upx;
  color: rgba(102, 102, 102, 1);
  padding: 30upx 18upx 19upx 22upx;
}

.synopsis-img {
  width: 712upx;
  height: 402upx;
}

.chapter-title {
  padding: 14upx 0 14upx 20upx;
  font-size: 28upx;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.chapter {
  font-size: 26upx;
  font-weight: 700;
}

.second_level {
  font-size: 26upx;
  padding: 20upx 0;
  color: rgba(102, 102, 102, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.teacher {
  padding: 30upx 18upx 30upx 22upx;
}

.material {
  font-size: 28upx;
  font-weight: 700;
  padding: 30upx 0 20upx 0;
}

.material-content {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 24upx 0 30upx 0;
}

.record-4 {
  padding: 0 20upx 88upx 20upx;
}

.evaluate {
  padding: 20upx 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.evaluate-content {
  padding: 20upx 0 22upx 0;
}

.evaluate-content-right {
  flex: 1;
  padding-left: 12upx;
}

.evaluate-right-top {

}

.score {
  margin: 26upx 0 21upx 0;
}

.evaluate-content-img {
  margin-top: 12upx;
}

.bottom-tab {
  width: 100%;
  padding: 14upx 60upx 16upx 140upx;
  background-color: #FFFFFF;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0;
}

.study {
  width: 358upx;
  height: 70upx;
  background-color: rgba(229, 39, 24, 1);
  border-radius: 40upx;
  color: #FFFFFF;
}

.bounced {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0 rpx;
  left: 0 rpx;
}

.bounced-box {
  width: 462 rpx;
  height: 256 rpx;
  padding: 26upx 0 18upx 0;
  border: 2 rpx solid #000000;
  background-color: #FFFFFF;
  position: absolute;
  top: 46.6%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12 rpx;
  overflow: hidden;
}

.box-button {
  width: 100%;
  padding-top: 16upx;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.button-yes {
  height: 100%;
  color: rgba(229, 39, 24, 1);
  background-color: #FFFFFF;
  font-size: 26 rpx;
  font-weight: 700;
}
</style>
